<template>
	<div id="personalDetails">
		<div class="navBar">
			<uni-icons type="back" size="14" color="#fff" id="icon" @tap="goBack()"></uni-icons>
			<span class="title">查报表</span>
		</div>	
		
		<view class="charts">
				
				<view class="charts-box" style="background-color: #fff;border-radius: 5%;padding: 40rpx 40rpx 40rpx 40rpx;margin-bottom: 40rpx; ">
					<view style="color: #49C595;border-left: 6rpx solid #49C595;padding-left: 40rpx;">成长星各项占比</view>
				    <qiun-data-charts type="pie" :canvas2d="true" :chartData="chartData2" />
				</view>
				
				<view class="charts-box" style="background-color: #fff;border-radius: 5%;padding: 40rpx 40rpx 80rpx 40rpx ;margin-bottom: 40rpx;">
					<view style="color: #49C595;border-left: 6rpx solid #49C595;padding-left: 40rpx;">成长星数据一览</view>
				    <qiun-data-charts type="column" :canvas2d="true" :chartData="chartData" />
				</view>
				
				<view class="charts-box" style="background-color: #fff;border-radius: 5%;padding: 40rpx 40rpx 20rpx 40rpx ;margin-bottom: 40rpx;">
					<view style="color: #49C595;border-left: 6rpx solid #49C595;padding-left: 40rpx;">成长星五维对比</view>
				    <qiun-data-charts type="radar" :canvas2d="true" :chartData="chartData3" />
				</view>
			</view>

	</div>
</template>

<script>
	export default{
		data(){
			return {
				chartData:{
				  categories: ["德", "智", "体", "美", "劳"],
				  series: [{
				    name: "目标值",
				    data: [35, 36, 31, 33, 13]
				  }]
				},
				chartData3:{
				  categories: ["德", "智", "体", "美", "劳"],
				  series: [{
				    name: "目标值",
				    data: [300, 600, 400, 200, 500]
				  }]
				},
				chartData2:{
				  series: [{
				    data: [
				      {
				        name: "德",
				        value: 50
				      }, {
				        name: "智",
				        value: 30
				      }, {
				        name: "体",
				        value: 20
				      }, {
				        name: "美",
				        value: 18
				      }, {
				        name: "劳",
				        value: 8
				      }
				    ]
				  }]
				},
			}
		},
		methods:{
		goBack(){
			uni.navigateBack({
			    delta: 1
			})
		},
		}
	}
</script>


<style lang="scss">
	
	.navBar {
		height: 72rpx;
		background: #49C595;
		padding-top: 84rpx;
		position: relative;
	}
	
	#personalDetails{
		background-color: #49C595;
		padding-bottom: 50rpx;
	}
	
	.navBar>span {
		margin: auto;
	}
	.charts{
			.charts-box{
				width: 600rpx;
				height: 600rpx;
				margin: 20rpx auto;
			}
		}
	#icon {
		margin-left: 69rpx;
		font-size: 18px;
	}
	
	.title {
		color: #FFF;
		position: absolute;
		left: 50%;
		transform: translate(-50%)
	}
</style>